<template>
  <px-button v-if="!disabled" class="mb-5" type="primary" @click="addCheck"> 新增检测 </px-button>
  <px-table ref="checkTableRef" :data="data" style="width: 100%" class="custom-table" max-height="250" border>
    <px-table-column type="index" label="序号" width="60" align="center" fixed="left" />
    <px-table-column prop="verifyDate" label="检验日期" width="150">
      <template #default="scope">
        <px-date-picker v-if="scope.row.isEdit" v-model="scope.row.verifyDate" type="date" size="small" :disabled-date="disabledFutureDate" />
        <span v-else>{{ dayjs(scope.row.verifyDate).format("YYYY-MM-DD") }}</span>
      </template>
    </px-table-column>
    <px-table-column prop="status" label="结论" width="120">
      <template #default="scope">
        <px-input v-if="scope.row.isEdit" v-model.trim="scope.row.status" size="small" />
        <span v-else>{{ scope.row.status }}</span>
      </template>
    </px-table-column>
    <px-table-column prop="verifyCompany" label="检测单位">
      <template #default="scope">
        <px-input v-if="scope.row.isEdit" v-model.trim="scope.row.verifyCompany" size="small" />
        <span v-else>{{ scope.row.verifyCompany }}</span>
      </template>
    </px-table-column>
    <px-table-column prop="verifyCost" label="检测费用" width="150">
      <template #default="scope">
        <px-input-number v-if="scope.row.isEdit" v-model="scope.row.verifyCost" size="small" min="0" />
        <span v-else>{{ scope.row.verifyCost }}</span>
      </template>
    </px-table-column>
    <px-table-column v-if="!disabled" align="center" label="操作" width="120" fixed="right">
      <template #default="scope">
        <px-button v-if="!scope.row.isEdit" link type="primary" size="small" @click.prevent="editRow(scope.row)"> 编辑 </px-button>
        <px-button v-else link type="primary" size="small" @click.prevent="confirmRow(scope.$index, scope.row)"> 确定 </px-button>
        <px-button link type="danger" size="small" @click.prevent="deleteRow(scope.$index)"> 删除 </px-button>
      </template>
    </px-table-column>
  </px-table>
</template>
<script lang="ts" setup>
import { cloneDeep } from "@pureadmin/utils";
import { ref, watch } from "vue";
import dayjs from "dayjs";
import { PxMessage } from "px-ui";
import { nextTick } from "vue";

interface Props {
  tableData?: any[];
  disabled: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  tableData: () => [],
  disabled: false
});
const data = ref<any[]>([]);
watch(props, val => {
  data.value = val.tableData.map(e => {
    return {
      isEdit: false,
      ...e
    };
  });
});
const checkTableRef = ref<any>(null);
const addCheck = () => {
  data.value.push({ verifyDate: "", status: "", verifyCompany: "", verifyCost: null, isEdit: true });
  updateData();
  nextTick(() => {
    const bodyWrapper = checkTableRef.value.$refs.bodyWrapper;
    const scrollBarRef = checkTableRef.value.$refs.scrollBarRef;
    if (bodyWrapper) {
      scrollBarRef.setScrollTop(bodyWrapper.scrollHeight);
    }
  });
};
const emit = defineEmits(["update"]);
function updateData() {
  const list = cloneDeep(data.value).map((e, index) => {
    return {
      ...e,
      id: index + 1,
      verifyDate: dayjs(e.verifyDate).format("YYYY-MM-DD")
    };
  });
  emit("update", list);
}
const deleteRow = (index: number) => {
  data.value.splice(index, 1);
  updateData();
};
const confirmRow = (index: number, row: any) => {
  const tempObj = {
    verifyDate: row.verifyDate,
    status: row.status,
    verifyCompany: row.verifyCompany
  };
  const isNull = Object.values(tempObj).some(e => !e);
  if (isNull) {
    PxMessage.warning("存在未填检测信息项！");
    return;
  }
  data.value[index].isEdit = false;
  updateData();
};
const editRow = (row: any) => {
  row.isEdit = true;
  updateData();
};
const disabledFutureDate = (date: Date) => {
  const today = new Date();
  today.setHours(23, 59, 59, 999);
  return date > today; // 如果日期大于今天，则禁用
};
</script>
